<template>
  <ul class="goods">
    <li v-for="item in goodsList" class="item" @click="itemClick(item.id)">
      <img :src="item.list_pic_url" alt="" @load="imageLoad" />
      <p class="name">{{ item.name }}</p>
      <span class="price">{{ "¥" + item.retail_price }}</span>
    </li>
  </ul>
</template>
<script>
export default {
  name: "Goods",
  props: {
    goodsList: Array,
  },
  methods: {
    itemClick(id) {
      this.$router.push("/detail/" + id);
    },
    imageLoad() {
      this.$bus.$emit("itemImageLoad"); 
    },
  },
};
</script>
<style scoped>
.goods {
  display: flex;
  flex-wrap: wrap;
}
.goods .item {
  width: 50%;
  height: 260px;
  padding: 0 5px 10px 5px;
}
.goods .item img {
  display: block;
  width: 170.5px;
  height: 170.5px;
}
.goods .item .name {
  margin-top: 8px;
  font-size: 14px;
  color: #333;
}
.goods .item .price {
  font-size: 16px;
  color: #dd1a21;
  font-family: PingFangSC-Regular;
  line-height: 24px;
}
</style>